<template>
    <div class="contentWeb clear">
        <div class="member_menu">
            <Companyleft active=""/>
        </div>
        <div class="member_right ">
            <div class="personTengt">
                <Companytitle name="企业信息 "/>
                <el-form ref="form" :model="form" :rules="rules" label-width="180px">
                    <el-form-item label="企业全称" prop="name">
                        <el-input placeholder="请输入企业全称" v-model="form.name" :disabled="!editAble" style="width: 60%"/>
                    </el-form-item>
                    <el-form-item label="企业简称" prop="nickname">
                        <el-input placeholder="请输入企业简称" v-model="form.nickname" :disabled="!editAble" style="width: 60%"/>
                    </el-form-item>
                    <div class="clear">
                        <div class="formban" style="width: 43%">
                            <el-form-item label="企业性质" prop="enterpriseNature">
                                <el-select style="width: 230px;" :disabled="!editAble"
                                  v-model="form.enterpriseNature" :loading="xingzhiloading" placeholder="请选择企业性质">
                                    <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName"
                                               v-for="(item, index) in xingzhiList"></el-option>

                                </el-select>
                            </el-form-item>

                            <el-form-item label="招聘联系人" prop="contacts">
                                <el-input placeholder="请输入招聘联系人" v-model="form.contacts"/>
                            </el-form-item>
                            <el-form-item label="联系人手机号" prop="mobileNum">
                                <el-input placeholder="请输入联系人手机号" v-model="form.mobileNum"/>
                            </el-form-item>
                            <el-form-item label="工作时间" prop="workTime">
                                <el-time-picker
                                  style="width:230px"
                                        is-range
                                        v-model="form.workTime"
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        placeholder="选择工作时间">
                                </el-time-picker>
                            </el-form-item>
                        </div>

                        <div class="formban" style="width: 57%">
                            <el-form-item label="统一社会信用代码" prop="sociologyCreditCode">
                              <el-input placeholder="请输入统一社会信用代码" v-model="form.sociologyCreditCode" :disabled="!editAble"/>
                            </el-form-item>
                            <el-form-item label="企业规模" prop="companySize">
                                <el-select style="width:360px" :disabled="!editAble"
                                  v-model="form.companySize" :loading="guimoloading" placeholder="请选择企业规模">
                                    <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName"
                                               v-for="(item, index) in guimoList"></el-option>

                                </el-select>
                            </el-form-item>
                            <el-form-item label="联系人身份证号" prop="identifyCode">
                                <el-input placeholder="请输入联系人身份证号" v-model="form.identifyCode"/>
                            </el-form-item>
                            <el-form-item label="电子邮件" prop="email">
                                <el-input placeholder="请输入电子邮件" v-model="form.email"/>
                            </el-form-item>
                        </div>
                    </div>
                    <el-form-item label="所属行业" prop="industry">
                      <span>
                        <el-tag style="margin-right: 10px; margin-left:0"
                          v-for="(item, index) in form.industry"
                          @close="delIndustry(index)"
                          :key="index"
                          :closable="editAble"
                          :disable-transitions="false" >
                            {{item}}
                        </el-tag>
                      </span>
                      <el-cascader v-if="editAble && form.industry.length < 5" clearable style="width:120px" size="small"
                        :options="hangyelist"
                        @change="hangyechange"
                        placeholder="请选择所属行业"
                        v-model="tmpIndustryList"
                        collapse-tags
                        :show-all-levels="false"
                        :props="{value: 'name', label: 'name', children: 'contentSet'}">
                      </el-cascader>
                    </el-form-item>
                    <el-form-item required label="企业所在地址">
                        <div>
                            <Area style="margin-bottom: 10px;" :disabled="!editAble"
                                  :form="{province: form.province, city: form.city,district: form.district}"
                                  v-if="showad" :hidequ="false" @addresschange="addresschange"/>
                            <el-input placeholder="请输入详细地址" v-model="address" :disabled="!editAble"  style="width: 400px"/>
                            <el-button v-if="editAble" style="margin-left: 10px; " @click="editshowads">编辑地址</el-button>
                        </div>

                    </el-form-item>
                    <el-form-item required label="企业福利">
                        <el-tag
                                :key="tag"
                                v-for="tag in fuli"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag)">
                            {{tag}}
                        </el-tag>
                        <el-input
                                class="input-new-tag"
                                v-if="inputVisible"
                                v-model="inputValue"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm"
                                @blur="handleInputConfirm"
                        >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加新的</el-button>
                        <el-button type="primary" style="margin-left: 30px;" size="small" @click="getTreatmentState">重置
                        </el-button>
                    </el-form-item>
                    <el-form-item label="企业介绍" prop="introduction">
                        <el-input type="textarea" rows="5" v-model="form.introduction" style="width: 80%"
                                  placeholder="请输入企业介绍"/>
                    </el-form-item>
                    <el-form-item required label="经办人身份证明" prop="jbrsfzm">
                        <div class="uploadimg" >
                            <el-upload
                              v-loading="jbrLoading"
                              :disabled="!editAble"
                                name="enterprise_licence"
                                class="avatar-uploader"
                                :action="uploadLicence"
                                :show-file-list="false"
                                :on-success="jbrSuccess"
                                accept=".jpg,.png"
                                :before-upload="beforeJBRUpload">
                                <img v-if="form.jbrsfzm" :src="form.jbrsfzm" class="avatar"
                                     :style="uplaodstyle">
                                <i v-else class="el-icon-plus avatar-uploader-icon" :style="uplaodstyle"></i>
                                <div slot="tip" class="el-upload__tip">支持格式：jpg、png
                                </div>
                            </el-upload>
                        </div>
                        <span class="tishiy">本企业和东港人社网后台系统可见</span>
                    </el-form-item>
                    <el-form-item required label="用人单位委托证明" prop="yrdwwtzm">
                        <div class="uploadimg" >
                            <el-upload
                              v-loading="wtzmLoading"
                              :disabled="!editAble"
                                name="enterprise_licence"
                                class="avatar-uploader"
                                :action="uploadLicence"
                                :show-file-list="false"
                                :on-success="wtzmSuccess"
                                accept=".jpg,.png"
                                :before-upload="beforeWTZMUpload">
                                <img v-if="form.yrdwwtzm" :src="form.yrdwwtzm" class="avatar"
                                     :style="uplaodstyle">
                                <i v-else class="el-icon-plus avatar-uploader-icon" :style="uplaodstyle"></i>
                                <div slot="tip" class="el-upload__tip">支持格式：jpg、png
                                </div>
                            </el-upload>
                        </div>
                        <span class="tishiy">本企业和东港人社网后台系统可见</span>
                    </el-form-item>
                    <el-form-item required label="营业执照" prop="businessLicenseUrl">
                        <img v-if="form.businessLicenseUrl" :src="form.businessLicenseUrl"
                             style="width: 200px; height: 200px; float: left;">
                        <el-upload v-if="editAble"
                                style="float: left; margin-top: 160px; margin-left: 20px;"
                                name="enterprise_licence"
                                :action="uploadLicence"
                                :show-file-list="false"
                                accept=".jpg,.png"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeLicenseUpload">
                            <el-button v-loading="licenseLoading" style="background: #20a2b2; width: 140px; border: 0;"
                                       type="primary">上传图片
                            </el-button>
                            <div slot="tip" class="el-upload__tip">支持格式：jpg、png</div>
                        </el-upload>
                        <div class="clear"></div>
                    </el-form-item>
                    <el-form-item required label="企业法人身份证" prop="sfzZm">
                        <div class="uploadimg" >
                            <el-upload
                              v-loading="frontLoading"
                              :disabled="!editAble"
                                name="enterprise_licence"
                                class="avatar-uploader"
                                :action="uploadLicence"
                                :show-file-list="false"
                                :on-success="frontSuccess"
                                accept=".jpg,.png"
                                :before-upload="beforeFrontUpload">
                                <img v-if="form.sfzZm" :src="form.sfzZm" class="avatar"
                                     :style="uplaodstyle">
                                <i v-else class="el-icon-plus avatar-uploader-icon" :style="uplaodstyle"></i>
                                <div slot="tip" class="el-upload__tip">支持格式：jpg、png
                                  <span class="mark">正面</span>
                                </div>
                            </el-upload>
                        </div>
                        <div class="uploadimg" >
                            <el-upload
                              v-loading="backLoading"
                              :disabled="!editAble"
                              name="enterprise_licence"
                              class="avatar-uploader"
                              :action="uploadLicence"
                              :show-file-list="false"
                              :on-success="backSuccess"
                              accept=".jpg,.png"
                              :before-upload="beforeBackUpload">
                              <img v-if="form.sfzFm" :src="form.sfzFm" class="avatar"
                                    :style="uplaodstyle">
                              <i v-else class="el-icon-plus avatar-uploader-icon" :style="uplaodstyle"></i>
                              <div slot="tip" class="el-upload__tip">
                                <span class="mark" style="bottom:-14px;">反面</span>
                              </div>
                            </el-upload>
                        </div>
                        <span class="tishiy">本企业和东港人社网后台系统可见</span>
                    </el-form-item>
                    <el-form-item required label="企业相册" prop="contentSet">
                        <div>
                            <div v-for="(item,k) in contentSet" :key="k" class="qixc"
                                 style="float: left; margin-top: 10px; margin-right: 10px; position: relative;">
                                <img :src="item.imageUrl"
                                     style="width: 120px; height: 120px; vertical-align: top">
                                <div class="shanch" @click="delxc(item, k)">
                                    删除
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <el-upload ref="upload"
                                :disabled="contentSet.length >= 3"
                                :multiple="true"
                                :show-file-list="false"
                                name="enterprise_image"
                                accept=".jpg,.png"
                                :action="enterpriseImage"
                                :on-success="xiangceSuccess"
                                :before-upload="beforeContentSetUpload"
                                :file-list="fileList">
                            <el-button v-loading="contentSetLoading"
                                    :disabled="contentSet.length >= 3"
                                    :style="'background:'+(contentSet.length >= 3 ? 'rgba(32, 162, 178, 0.5)' : '#20a2b2')+'; width: 180px; border: 0; margin-top: 15px;'"
                                    type="primary">上传企业相册
                            </el-button>
                            <div slot="tip" class="el-upload__tip">支持格式：jpg、png</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item style="margin-top: 60px">
                        <el-button style="background: #20a2b2; width: 300px; border: 0; margin-left: 150px;"
                                   type="primary"
                                   @click="onSubmit">保存
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import moment from 'moment'
import util from '../../assets/js/util'
import Companytitle from '../../components/companytitle'
// import Upload from '../../components/upload'
import Companyleft from '../../components/companyleft'
import Area from '../../components/area'
import {
  enterpriseImage, EnterpriseInfo, OccupationType, updateEnterpriseLicence,
  EnterpriseNature, TreatmentState, uploadLicence, updateEnterpriseInfo, addImageToAlbum, deleteEnterpriseImage,
  EnterpriseSize
} from '../../assets/js/domains'

export default {
  name: 'PersonInfo',
  components: {
    Companyleft,
    // Upload,
    Companytitle,
    Area
  },
  directives: {},
  data: function () {
    return {
      editAble: false,
      tmpIndustryList: [],
      showad: false,
      md_userInfo: {},
      address: '',
      form: {
        workTime: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      },
      rules: {
        name: [{ required: true, message: '请输入企业全称', trigger: 'blur' }],
        nickname: [
          { required: true, message: '请输入企业简称', trigger: 'blur' },
          { max: 4, message: '企业简称不超过4个汉字', trigger: 'blur' }
        ],
        enterpriseNature: [{ required: true, message: '请选择企业性质', trigger: 'change' }],
        contacts: [
          { required: true, message: '请输入招聘联系人', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        mobileNum: [
          { required: true, message: '请输入联系人手机号', trigger: 'blur' },
          { validator: this.validMobile, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        workTime: [{ required: true, message: '选择工作时间', trigger: 'change' }],
        sociologyCreditCode: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        companySize: [{ required: true, message: '请选择企业规模', trigger: 'change' }],
        identifyCode: [
          { required: true, message: '请输入联系人身份证号', trigger: 'blur' },
          { validator: this.validIdCode, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮件', trigger: 'blur' },
          { validator: this.validEmail, message: '请输入正确的电子邮件地址', trigger: 'blur' }
        ],
        industry: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
        introduction: [
          { required: true, message: '请输入企业介绍', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        imageUrl: [{ required: true, message: '请上传企业相册', trigger: 'change' }],

        jbrsfzm: [{ required: true, message: '请上传经办人身份证明', trigger: 'change' }],
        yrdwwtzm: [{ required: true, message: '请上传用人单位委托证明', trigger: 'change' }],
        businessLicenseUrl: [{ required: true, message: '请上传营业执照', trigger: 'change' }],
        sfzZm: [{ required: true, message: '请上传企业法人身份证', trigger: 'change' }],
        contentSet: [{ required: true, validator: this.validContentSet, message: '请上传企业相册', trigger: 'change' }]
      },
      fileList: [],
      contentSet: [],
      fuli: [],
      licenseLoading: false,
      contentSetLoading: false,
      frontLoading: false,
      backLoading: false,
      jbrLoading: false,
      wtzmLoading: false,
      uplaodstyle: {
        width: '160px',
        height: '160px'
      },
      uploadLicence: uploadLicence,
      xingzhiloading: true,
      guimoloading: true,
      hangyeLoading: true,
      xingzhiList: [],
      hangyelist: [],
      guimoList: [],
      enterprise_id: 0,
      enterpriseImage: enterpriseImage,
      inputVisible: false,
      inputValue: ''
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
  },
  mounted: function () {
    this.enterprise_id = localStorage.getItem('md_user_uid')
    this.getOccupationType()
    this.getEnterpriseNature()
    this.getTreatmentState()
    this.getEnterpriseSize()
    this.getpost()
  },
  methods: {
    validMobile (rule, value, callback) {
      if (!util.isMobile(value)) {
        return callback(new Error())
      }
      callback()
    },
    validIdCode (rule, value, callback) {
      if (!util.isIdCode(value)) {
        return callback(new Error())
      }
      callback()
    },
    validEmail (rule, value, callback) {
      if (!util.isEmail(value)) {
        return callback(new Error())
      }
      callback()
    },
    validContentSet (rule, value, callback) {
      if (!this.form.contentSet || !this.form.contentSet.length) {
        return callback(new Error())
      }
      callback()
    },
    delIndustry (index) {
      this.form.industry.splice(index, 1)
    },
    delxc: function (item, index) {
      const _this = this
      deleteEnterpriseImage({ enterprise_image_id: item.id }).then(function (res) {
        if (res.code === 200) {
          _this.contentSet.splice(index, 1)
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    hangyechange: function (e) {
      if (this.form.industry.indexOf(e[1]) === -1) {
        this.form.industry.push(e[1])
      }
      this.tmpIndustryList = []
    },
    editshowads: function () {
      this.showad = !this.showad
    },
    addresschange: function (e) {
      if (e.districtName) {
        this.address = e.provinceName + e.cityName + e.districtName
        this.form.district = e.district
        this.form.city = e.city
        this.form.province = e.province

        this.showad = false
      }
    },
    getOccupationType: function () {
      const _this = this
      OccupationType().then(function (res) {
        _this.hangyeLoading = false
        if (res.code === 200) {
          _this.hangyelist = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    getEnterpriseNature: function () {
      const _this = this
      EnterpriseNature().then(function (res) {
        _this.xingzhiloading = false
        if (res.code === 200) {
          _this.xingzhiList = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    getEnterpriseSize: function () {
      const _this = this
      EnterpriseSize().then(function (res) {
        _this.guimoloading = false
        if (res.code === 200) {
          _this.guimoList = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    onSubmit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          this.$message.error('请完善后再保存！')
          return
        }
        if (!this.checkForm()) {
          return
        }
        this.submitData()
      })
    },
    submitData () {
      const _this = this
      this.form.treatment = this.fuli.join(',')
      updateEnterpriseLicence({
        business_licence_url: this.form.businessLicenseUrl,
        enterprise_id: this.form.id,
        logo_url: this.form.logo
      }).then(function (res) {
        if (res.code !== 200) {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () { }
          })
        }
      })
      const params = Object.assign({}, this.form)
      params.industry = this.form.industry.join(',')
      delete params.contentSet
      delete params.positionSet
      delete params.workTime

      for (const key in params) {
        if (params[key] == null) {
          params[key] = ''
        }
      }
      updateEnterpriseInfo(params).then(function (res) {
        if (res.code === 200) {
          _this.$alert('保存成功', '提示', {
            confirmButtonText: '确定',
            callback: function () {
              window.location.href = 'companyCenter.html'
            }
          })
        } else {
          _this.$alert(res.msg, '提示')
        }
      })
    },
    checkForm: function () {
      this.md_userInfo = JSON.parse(localStorage.getItem('md_userInfo'))
      if (!this.md_userInfo.logo) {
        this.$message.error('请上传公司logo')
        return false
      }
      this.form.logo = this.md_userInfo.logo
      if (!this.form.province || !this.form.city || !this.form.district || !this.address) {
        this.$message.error('请完善企业所在地址')
        return false
      }
      // this.form.addressDetail = this.address
      const validateKey = ['nickname', 'name', 'enterpriseNature', 'companySize', 'addressDetail', 'sociologyCreditCode',
        'contacts', 'identifyCode', 'email', 'mobileNum', 'startWorkTime', 'endWorkTime',
        'businessLicenseUrl', 'introduction', 'contentSet']
      for (let i = 0; i < validateKey.length; i++) {
        const key = validateKey[i]
        if (!this.form[key]) {
          this.$message.error('请完善企业信息后再保存！')
          return false
        }
      }
      if (this.form.nickname.length > 4) {
        this.$message.error('企业简称不超过4个汉字')
        return false
      }
      if (!this.form.industry.length) {
        this.$message.error('请完善企业所属行业')
        return false
      }
      if (!util.isIdCode(this.form.identifyCode)) {
        this.$message.error('联系人身份证号格式不正确')
        return false
      }
      if (!util.isMobile(this.form.mobileNum)) {
        this.$message.error('联系人手机号格式不正确')
        return false
      }
      if (!util.isEmail(this.form.email)) {
        this.$message.error('邮箱格式不正确')
        return false
      }
      this.form.startWorkTime = moment(this.form.workTime[0]).format('HH:mm')
      this.form.endWorkTime = moment(this.form.workTime[1]).format('HH:mm')
      if (!this.form.startWorkTime || !this.form.endWorkTime) {
        this.$message.error('请完善企业工作时间')
        return false
      }
      if (!this.fuli.length) {
        this.$message.error('请完善企业福利')
        return false
      }
      if (!this.form.contentSet || !this.form.contentSet.length) {
        this.$message.error('请完善企业相册')
        return false
      }

      return true
    },
    beforeJBRUpload (file) {
      this.beforeUpload(file, 'jbr')
    },
    beforeWTZMUpload (file) {
      this.beforeUpload(file, 'wtzm')
    },
    beforeFrontUpload (file) {
      this.beforeUpload(file, 'front')
    },
    beforeBackUpload (file) {
      this.beforeUpload(file, 'back')
    },
    beforeLicenseUpload (file) {
      this.beforeUpload(file, 'license')
    },
    beforeContentSetUpload (file) {
      this.beforeUpload(file, 'contentSet')
    },
    beforeUpload (file, type) {
      const suffix = file.name.substr(file.name.lastIndexOf('.') + 1)
      if (!['jpg', 'png'].includes(suffix.toLowerCase())) {
        this.$message.error('只能上传 jpg或png 格式的图片!')
        return false
      }
      this[type + 'Loading'] = true
    },
    jbrSuccess (e) {
      this.jbrLoading = false
      if (e.code === 200) {
        this.form.jbrsfzm = e.data
      }
    },
    wtzmSuccess (e) {
      this.wtzmLoading = false
      if (e.code === 200) {
        this.form.yrdwwtzm = e.data
      }
    },
    frontSuccess (e) {
      this.frontLoading = false
      if (e.code === 200) {
        this.form.sfzZm = e.data
      }
    },
    backSuccess (e) {
      this.backLoading = false
      if (e.code === 200) {
        this.form.sfzFm = e.data
      }
    },
    xiangceSuccess: function (e) {
      const _this = this
      this.contentSetLoading = false
      if (e.code === 200) {
        addImageToAlbum({ imageUrl: e.data, enterpriseUid: this.form.enterpriseUid }).then(function (res) {
          if (res.code === 200) {
            _this.contentSet.push({
              id: res.data.id,
              imageUrl: e.data
            })
          }
        })
      }
    },
    handleAvatarSuccess: function (e) {
      const _this = this
      this.licenseLoading = false
      if (e.code === 200) {
        _this.form.businessLicenseUrl = e.data
        _this.form = Object.assign({}, _this.form)
      }
    },
    getpost: function () {
      const _this = this
      EnterpriseInfo({
        enterprise_id: this.enterprise_id
      }).then(res => {
        if (res.code === 200) {
          _this.editAble = false
          _this.form = res.data
          _this.address = _this.form.addressDetail
          _this.contentSet = _this.form.contentSet ? _this.form.contentSet : []
          _this.form.treatment && (_this.fuli = _this.form.treatment.split(',').filter(item => !!item.trim()))
          _this.form.industry = res.data.industry.split(',')
          // _this.form.industry = res.data.industry.split(',')
          const startWorkTime = _this.form.startWorkTime.split(':')
          const endWorkTime = _this.form.endWorkTime.split(':')
          _this.form.workTime = [new Date(2016, 9, 10, startWorkTime[0], startWorkTime[1]), new Date(2016, 9, 10, endWorkTime[0], endWorkTime[1])]
          _this.form = Object.assign({}, _this.form)
        }
      })
    },
    getTreatmentState: function () {
      const _this = this
      TreatmentState().then(function (res) {
        if (res.code === 200) {
          _this.fuli = []
          for (let i = 0; i < res.data.length; i++) {
            _this.fuli.push(res.data[i].subTypeName)
          }
        }
      })
    },
    // 选择器
    handleClose: function (tag) {
      this.fuli.splice(this.fuli.indexOf(tag), 1)
    },

    showInput: function () {
      this.inputVisible = true
      const _this = this
      this.$nextTick(function () {
        _this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm () {
      this.validSensWords(null, this.inputValue, valid => {
        if (valid) {
          this.$alert(valid)
          return
        }
        this.inputValue && this.fuli.push(this.inputValue)
        this.inputVisible = false
        this.inputValue = ''
      })
    }
  }
}
</script>
<style lang="less" scoped>
    @import "../../assets/css/member";

    .uploadimg {
      float: left;
      display: inline-block;
      border-radius: 5px;
      background-color: #FDFDFD;
      margin-right: 10px;
      position: relative;
      .mark{
        position:absolute;
        bottom: 25px;
        left: 75px;
      }
    }

    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>
